<template>
    <div class="app">
      <el-card shadow="hover">
        <template #header>
          <h3>xxx管理系统</h3>
        </template>
  
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          label-position="left"
          require-asterisk-position="right"
        >
          <!-- prop="name"  这个表单 采用rules中哪个规则校验-->
          <el-form-item label="用户名" prop="loginname">
            <el-input v-model="ruleForm.loginname" />
          </el-form-item>
  
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" />
          </el-form-item>
  
          <el-form-item>
            <!--ruleFormRef 当前el-form组件对象  -->
  
            <el-button type="primary" @click="submitForm(ruleFormRef)"> 登录 </el-button>
            <!--ruleFormRef 当前el-form组件对象  -->
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  <script setup lang="ts">
  import { reactive, ref } from 'vue'
  
  // 引入 组件库中定义的接口
  import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
  
  // 自己的定义接口-- 描述 表单数据对象的 类型
  interface RuleForm {
    loginname: string
    password: string
  }
  
  // 导入interface和请求函数
  import { loginRequest, type IUserLoginReBody } from '@/api/userAPI'
  import { useRouter } from 'vue-router'
  const router = useRouter()
  //获取 表单 el-form组件实例
  const ruleFormRef = ref<FormInstance>()
  // 表单数据对象
  const ruleForm = reactive<RuleForm>({
    loginname: '',
    password: '',
  })
  //rules 做表单验证的对象--这个对象传入到el-form组件的rules属性
  const rules = reactive<FormRules<RuleForm>>({
    // 用户名的校验规则
    loginname: [
      // 数组中一个对象就是一个校验规则
      {
        // 必填
        required: true,
        // 提示内容
        message: '请输入用户名',
        // 触发：失焦焦点
        trigger: 'blur',
      },
      // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
      {
        //正则校验
        pattern: /^.{3,32}$/,
        message: '用户名必须是3-32位的字符',
        trigger: 'blur',
      },
    ],
    password: [
      {
        required: true,
        message: '请输入密码',
        trigger: 'change',
      },
    ],
    // region: [
    //   {
    //     required: true,
    //     message: 'Please select Activity zone',
    //     trigger: 'change',
    //   },
    // ],
  })
  // 点击提交
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
  
    // formEl.validate  校验表单的内容是否 否个 rules中规则
    await formEl.validate(async (valid, fields) => {
      // valid 校验结果
      console.log(valid)
      //返回的校验不通过的字段
      console.log(fields)
      if (valid) {
        console.log('submit!')
        // 调用登录接口
        const obj: IUserLoginReBody = { adminname: ruleForm.loginname, password: ruleForm.password }
        const r = await loginRequest(obj)
        console.log(r)
        // r.data
        if (r.data.code == '200') {
          //登录成功
          localStorage.setItem('mall-b-token', r.data.data.token)
          // 弹出提示--调用弹框函数--引入elementPlus的全局样式
          // import "element-plus/dist/index.css";
          ElMessage.success(r.data.message)
          // 跳转
          router.push('/home')
        }
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  // 重置表单的方法
  const resetForm = (formEl: FormInstance | undefined) => {
    // 判断组件对象存在
    if (!formEl) return
    // 调用组件实例上的重置方法
    formEl.resetFields()
    // ruleFormRef.value?.resetFields()
  }
  </script>
  <style lang="scss" scoped>
  .app {
    background-image: url('@/assets/image/bg.jpg');
    height: 100%;
    width: 100%;
    display: flex;
  
    .el-card {
      width: 500px;
      height: 400px;
      margin: auto;
    }
  }
  </style>
  <style>
  /*
    需求：想要一个 elementPlus 内置组件的样式
      1-找api文档，没有属性 控制这个样式
      2-全局样式，问题：会影响页面的这个组件
  */
  /* .el-form-item__label {
    color: red;
  } */
  </style>
  <style scoped>
  /* 深度选择器 */
  :deep(.el-form-item__label) {
    /* color: red; */
    display: flex;
    justify-content: space-between;
  }
  </style>
  